<template>
  <view class="gg-geo-local-wrap">
    <gg-form-item :tip="tip" :label="label" :message="message" :must="must" :messageDisplay="messageDisplay" :labelWidth="localLabelWidth"
      :layout="localLayout" :onQClear="onQClear" :input-value="localVal">
      <view class="gg-geo-local" ref="onEmpty">
        <textarea class="gg-geo-local-item" v-model="localVal" :maxlength="maxlength" :placeholder="placeholder"
          placeholder-class="gg-geo-local-placeholder" @input="updateInput" auto-height />
        <view @tap="chooseLocation" class="gg-geo-local-button">
          <gg-icons type="action-search" size="20" color="#999999" />
        </view>
      </view>
    </gg-form-item>
    <view class="gg-geo-local-map" v-if="isShowMap">
      <map style="width:100%; height: 342rpx;" :longitude="map_location.longitude" :latitude="map_location.latitude" :scale="scale" show-location
        :markers="markers"></map>
    </view>
  </view>
</template>

<script>
import MixinsInput from '../mixins/mixins-input.js';
export default {
  mixins: [MixinsInput],
  name: "GgGeoLocal",
  options: {
    addGlobalClass: true,
  },
  props: {
    placeholder: {
      type: String,
      default: "小区、门牌号等"
    },
    isShowMap: {
      type: Boolean,
      default() {
        return false
      }
    },
    location: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    map_location: { //监听的对象
      deep: true, //深度监听设置为 true
      handler(n) {
        if (this.isShowMap) {
          this.initMarkers()
        }
      }
    },
    location(n) {
      if (this.isShowMap) {
        console.log('change:location')
        this.initLocation()
      }
    },
    value(n) {
      if (this.isShowMap) {
        console.log('change:value')
        this.initLocation()
      }
    }
  },
  data() {
    return {
      markers: [],
      //当前选择的位置
      scale: 12,
      map_location: {
        longitude: 116.397486,
        latitude: 39.908650
      }
    };
  },
  created: function () {
    this.initLocation();
  },
  methods: {
    initLocation() {
      if (this.location.longitude && this.location.latitude) {
        this.map_location = this.location;
      }
      if (this.value) {
        this.$set(this.map_location, 'address', this.value)
      }
    },
    chooseLocation() {
      uni.chooseLocation({
        keyword: '小区 写字楼',//搜索关键字，仅App平台支持
        success: (res) => {
          if (res.errMsg == "chooseLocation:ok") {
            this.localVal = res.address
            this.map_location = { ...res };
            this.scale = 16;
            this.$emit('location', { ...res })
            this.$emit('input', this.localVal)
          }
        }
      })
    },
    initMarkers() {
      let markers = [];
      let map_location = this.map_location
      markers.push({
        latitude: map_location.latitude,
        longitude: map_location.longitude,
        callout: {
          content: map_location.address,
          color: '#333333',
          borderRadius: 5,
          bgColor: '#ffffff',
          padding: 10,
          fontSize: 12,
          display: 'ALWAYS'
        }
      });
      // console.log(markers);
      this.markers = markers;
    }
  }
};
</script> 
<style>
.gg-geo-local-wrap {
  display: contents;
}
.gg-geo-local-item {
  min-height: 60px;
  line-height: 1.5em;
  font-size: 14px;
  padding: 7px 30px 0 0;
  width: calc(100% - 33px);
}
.gg-geo-local-rtip {
  color: #999;
  width: 50rpx;
  padding: 10rpx 0rpx 10rpx 0;
  position: absolute;
  right: 0;
  top: -7px;
  overflow: hidden;
}
.gg-geo-local-button {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  background-color: #ffffff;
  text-align: center;
  position: absolute;
  top: 5px;
  right: 3px;
}
.gg-geo-local-map {
  padding: 10px 15px;
  background-color: #ffffff;
}
</style>
